import React, { FC } from 'react'
import { Layout, Menu, Breadcrumb } from 'antd';
import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons';
import './index.scss'
import Foot from '../../../components/Footer';
import Head from '../../../components/Header';
import Side from '../../../components/Side';
import {Outlet } from 'react-router-dom'
import {inject,observer} from 'mobx-react'
const { SubMenu } = Menu;
const { Header, Content, Sider,Footer } = Layout;
const Mine:FC<any>=({
    collapsed
})=> {
    const {myCollapsed}=collapsed
  return (
    <div style={{width:"100%",height:"100%"}}>
    <Layout>
      <Sider
      collapsed={myCollapsed}
      >
        <Side></Side>
      </Sider>
      <Layout>
        <Header>
          <Head></Head>
        </Header>
        <Content>
           <Outlet></Outlet>
        </Content>
        <Footer>
          <Foot></Foot>
        </Footer>
      </Layout>
    </Layout>
        
    </div>
  )
}
export default inject('collapsed')(observer(Mine))
